<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
	<meta name="format-detection" content="telephone=no" />
	<meta name="renderer" content="webkit" />
	<title>demo</title>
    <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
    <link rel="stylesheet" href="js/fullcalendar/fullcalendar.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="https://www.layuicdn.com/layui/layui.js"></script>


<script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script src="js/fullcalendar/fullcalendar.min.js"></script>
<script src="js/jquery-ui.custom.min.js"></script>


</head>
<body>

<div id='calendar'></div>



<!-- 选择时间段弹层 -->
<div id="reservation" style="padding:20px 20px 20px 0;display: none;">
    <div class="layui-form-item">
        <label class="layui-form-label">开始时间</label>
        <div class="layui-input-block">
            <input type="text" class="layui-input lay-date" name="startTime" id="laydate-start" readonly="">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">结束时间</label>
        <div class="layui-input-block">
            <input type="text" class="layui-input lay-date" name="endTime" id="laydate-end" readonly="">
        </div>
    </div>
</div>  


</body>

<script>
    // $(document).ready(function () {

layui.use(['jquery','form','laydate','layer'],function(){
    var $ = layui.jquery,
        layer = layui.layer,
        form = layui.form,
        laydate= layui.laydate;        


    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();


    var temp1 = [
            {
                id:1,
                title: '长事件',
                start: '2020-04-22',
                end: '2020-04-25',
            },
            {
                id: 2,
                title: '重复事件',
                start: '2020-04-25 13:30',
                end: '2020-04-25 15:30',
                allDay: false,
            },
            {
                id: 3,
                title: '重复事件',
                start: '2020-04-25',
                allDay: false
            },
            {
                id:4,
                title: '会议',
                start: '2020-04-23 8:30',
                end: '2020-04-23 11:30',
                allDay: false
            },
            {
                id:5,
                title: '午餐',
                start: '2020-04-22 11:30',
                end: '2020-04-22 12:30',
                allDay: false
            },
            {
                id:6,
                title: '生日',
                start: '2020-04-24 17:00',
                end: '2020-04-24 19:00',
                allDay: false
            },
            {
                id:7,
                title: '打开百度',
                start: '2020-04-26 10:00',
                end: '2020-04-26 11:00',
                url: 'http://baidu.com/',
                allDay: false
            }
        ]


    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        height:700,
        //editable: true,//允许拖动
        defaultView:"agendaWeek",//month agendaDay  agendaWeek  basicDay
        dragOpacity: {//设置拖动时事件的透明度
            agenda: .5,
            '':.6
        },
        dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],  
        allDaySlot: true,//allday 整天的日程是否显示
        scrollTime :'09:00:00',//当切换到agenda时，初始滚动条滚动到的时间位置，默认在6点钟的位置
        // minTime : '06:00:00',//设置显示的时间从几点开始
        // maxTime:'21:00:00',//设置显示的时间从几点结束
        timeFormat:{agenda:'h:mm{ - h:mm}'},
        selectable: true,
        select: function( startDate, endDate, allDay, jsEvent, view ){
            var startTime = $.fullCalendar.formatDate(startDate,'yyyy-MM-dd H:mm'),
                endTime =$.fullCalendar.formatDate(endDate,'yyyy-MM-dd H:mm');
            var start =$.fullCalendar.formatDate(startDate,'H:mm');
                end =$.fullCalendar.formatDate(endDate,'H:mm');
            reservation({startTime,endTime,start,end});
        },
        events:temp1,
        dayClick: function(date, allDay, jsEvent, view) {//当单击日历中的某一天时，触发callback
            // var selDate =$.fullCalendar.formatDate(date,'yyyy-MM-dd HH:mm');
            //var selDate =$.fullCalendar.formatDate(date,'H:mm');
            //console.log(selDate)
        },
        eventClick: function(calEvent, jsEvent, view) {//当点击日历中的某一日程（事件）时，触发此操作
        },               
    });

    // 预约
    function reservation(time){
        console.log(time)
        layer.open({
            type:1,
            title:'预约时间',
            area:['400px'],
            content:$('#reservation'),
            btn:['确定','取消'],
            success:function(layero,index){
                layero.addClass('layui-form').attr('lay-filter','reservationForm');
                layero.find('.layui-layer-btn0').attr({
                    'lay-filter' : 'reservationSubmit',
                    'lay-submit' : ''
                });
                form.val('reservationForm',{
                    "startTime":time.start,
                    "endTime":time.end,
                });
                //开始日期
                var insStart = laydate.render({
                    elem: '#laydate-start'
                    ,type: 'time'
                    ,format:'H:mm'
                    ,btns: ['confirm']
                    ,ready: function (date) {
                        formatminutes();
                    }        
                });
                //结束日期
                var insEnd = laydate.render({
                    elem: '#laydate-end'
                    ,type: 'time'
                    ,format:'H:mm'
                    ,btns: ['confirm']
                    ,ready: function (date) {
                        formatminutes();
                    }
                });
            },
            yes:function(index,layero){
                form.on('submit(reservationSubmit)',function(data){
                    //console.log(data.field)
                    layer.close(index);
                    var temp3 = [{ //一个假数据
                        id:100,
                        title:'ABI PCR仪',
                        start:time.startTime,
                        end:time.endTime,
                        allDay: false
                    }]
                    $('#calendar').fullCalendar('removeEvents',7);// 移除一个数据,id:001
                    $('#calendar').fullCalendar('addEventSource',temp3);// 添加一个数据
                    //$('#calendar').fullCalendar('refetchEvents'); //重新抓取所有的日程事件源上的日程事件并渲染它们
                    // $('#calendar').fullCalendar( 'updateEvent', event );// 更新日历空间中的一个日程事件，如果是重复的日程事件，则都更新
                    return false;
                })
            },
        })
    }

    // laydate特殊化处理
    function formatminutes(){
        var dateortime = $(".layui-laydate").find(".layui-laydate-footer").find("span").text().substr(0, 4);
        if (dateortime == "确定") {
            var aa = $(".laydate-time-list li ol")[1];
            var showtime = $($(".laydate-time-list li ol")[1]).find("li");
            for (var i = 0; i < showtime.length; i++) {
                var t00 = showtime[i].innerText;
                if (t00 != "00" && t00 != "30") {
                    showtime[i].remove()
                }
            }
            $($(".laydate-time-list li ol")[2]).find("li").remove();  //清空秒
        }        
    }


});
</script>
</html>